<template>
  <div class="order_price">
    <el-form :inline="true" :model="searchForm" size="mini" style="margin-left: 10px">
      <el-form-item label="客户">
        <el-input v-model="searchForm.customerPhone" placeholder="请输入客户电话"></el-input>
      </el-form-item>
      <el-form-item label="订单创建日期">
        <el-date-picker
          v-model="searchForm.createTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status">
          <el-option :key="STATUS.QUOTING" :value="STATUS.QUOTING" label="未报价"></el-option>
          <el-option :key="STATUS.QUOTED" :value="STATUS.QUOTED" label="已报价"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="fa fa-file-excel-o"
          @click="exportExcel()"
        >&nbsp;导出到EXCEL</el-button>
      </el-form-item>
    </el-form>
    <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
      <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
      <el-table-column width="100" label="报价状态">
        <template slot-scope="scope">{{scope.row.quotationStatus===STATUS.QUOTING?'未报价':'已报价'}}</template>
      </el-table-column>
      <el-table-column prop="customerName" width="80" label="客户"></el-table-column>
      <el-table-column prop="customerTel" width="300" label="客户电话"></el-table-column>
      <el-table-column prop="prodName" label="产品名"></el-table-column>
      <el-table-column prop="orderDate" label="创建时间"></el-table-column>
      <el-table-column label="报价">
        <template slot-scope="scope">
          <span>{{scope.row.priceQuotation?scope.row.priceQuotation+'元':'暂无'}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <span
            class="t-link"
            v-if="scope.row.quotationStatus === STATUS.QUOTING"
            @click="showUpdatePriceDialog(scope.row,'订单报价')"
          >
            <span>去报价</span>
          </span>
          <span
            class="t-link"
            v-if="scope.row.quotationStatus ===  STATUS.QUOTED"
            @click="showUpdatePriceDialog(scope.row,'修改报价')"
          >
            <span>去修改</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
    <!--价格修改弹出层-->
    <el-dialog :title="dialogTitle" :visible.sync="priceModifyDialogVisible" width="30%" top="30vh">
      <el-form>
        <el-form-item label-width="120px" label="请输入价格">
          <el-input type="number" v-model="newPrice" min="1"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="priceModifyDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="updatePrice()">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import orderMixin from './order_mixin'
import ajax from '@/api/ajax'
const STATUS = {
  QUOTING: 'QUOTING',
  QUOTED: 'QUOTED'
}
export default {
  name: 'orderPrice',
  mixins: [orderMixin],
  data() {
    return {
      STATUS,
      searchForm: {
        customerPhone: '',
        createTime: [],
        status: STATUS.QUOTING
      },
      priceModifyDialogVisible: false,
      dialogTitle: '',
      newPrice: 0
    }
  },
  methods: {
    search() {
      let params = Object.assign({}, this.pagination, this.searchForm)
      this.searchOrder(params).then(result => {
        console.log(result)
      })
    },
    /**
     * 显示价格修改框
     */
    showUpdatePriceDialog(selectedRow, dialogTitle) {
      this.selectedRow = selectedRow
      this.dialogTitle = dialogTitle
      if (selectedRow.price) {
        this.newPrice = selectedRow.price
      } else {
        this.newPrice = 1
      }
      this.priceModifyDialogVisible = true
    },
    // 更新订单价格
    updatePrice() {
      let url = `/api/order/quote/${this.selectedRow.orderId}`
      ajax.post(url, { price: this.newPrice }).then(resp => {
        let result = resp.data
        this.handleOpSuccess(result)
        this.search()
        this.priceModifyDialogVisible = false
      })
    }
  },
  created() {
    this.search()
  }
}
</script>
<style>
.order_price {
}
</style>
